<!-- el弹窗中的表格-->
<template>
  <div>
    <el-button size="small" @click="open">打开弹窗</el-button>
    <el-dialog :visible.sync="isVisible">
      <el-table :data="tableData" row-key="id"  ref="multipleTable" @selection-change="handleSelectionChange">
        <el-table-column width="80px" type="selection" ></el-table-column>
        <el-table-column prop="title" label="名字"></el-table-column>
      </el-table>
      <div  slot="footer">
        <el-button @click="handleSave" size="small">保存</el-button>
        <el-button @click="handleClear" size="small">清空</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: false,
      tableData: [{id:1, title: "测试数据1" }, {id:2, title: "测试数据2" }],
      multipleSelection:[],// 选择数据
    };
  },
  methods:{
    open(){
      this.isVisible = true;
    },
    handleSave(){
      console.log(this.multipleSelection,'multipleSelection');
    },
    handleSelectionChange(val){
      console.log(val);
      this.multipleSelection = val;
    },
    handleClear(){
      this.multipleSelection = [];
      this.$refs.multipleTable.clearSelection();
    }
  }
};
</script>

<style>
</style>